<template>
	<view class="body">
		<view class="qrcode">
			<!-- <text>通行证</text> -->
			<image class="img" src="../../static/images/qrcode.png" mode=""></image>
			<view class="box"></view>
		</view>
		<view class="information">
			<view class="quarters">{{passdata}}</view>
			<view class="share">分享此二维码至访客手机，访客扫码即可开门</view>
		</view>
		<button class="btn" open-type="share" bindtap="onShareAppMessage">发送给朋友</button>
		<navigator url="../visitorInvitation/visitorInvitation" hover-class="navigator-hover">
			<button class="btn2">继续邀请</button>
		</navigator>
	</view>

</template>

<script>
	import {
		http
	} from '../../utils/http.js'
	export default {
		data() {
			return {
				passdata: '',
			}
		},
		methods: {
			getData(){
				http({
					url: '/visitor/list',
					method: 'get',
					params: {
						page: 1,
						limit: 10,
						visitorName:this.name
					}
				}).then(({data})=>{
					console.log(data)
					this.passdata=data[0].visitorHouse.room;
					console.log(this.passdata);
				})
			}
		},
		onLoad(option){
			console.log(option);
			this.name = option.name;
			this.getData();
		}
	}
</script>

<style lang="less">
	.body {
		.qrcode {
			width: 500rpx;
			height: 494rpx;
			// border: 4rpx solid blue;
			margin: 100rpx 124rpx;
			border-radius: 40rpx;
			position: relative;
			left: 0;
			top: 0;

			.img {
				width: 500rpx;
				height: 494rpx;

			}

			.box {
				width: 404rpx;
				height: 404rpx;
				// border: 1rpx solid red;
				position: absolute;
				top: 44rpx;
				left: 48rpx;
			}
		}

		.information {
			height: 158rpx;
			text-align: center;

			.quarters {
				font-size: 40rpx;
				margin-bottom: 36rpx;
			}

			.share {
				color: #8b8b8b;
			}
		}

		.btn {
			width: 680rpx;
			background-color: #006eff;
			color: #fff;
			margin-top: 96rpx;
			margin-bottom: 32rpx;
		}

		.btn2 {
			width: 680rpx;
			color: #006eff;
			background-color: #e4f0ff;
		}
	}
</style>
